<template>
  <div id="all" class="mt24 mb24">
    <div class="assss-write">
      <!-- 无评价 -->
      <!-- <div class="assess-write-none">目前暂无评价的商品</div> -->
      <div class="assess-write-item" v-for="(value,index) in items" :key="index">
        <div class="assess-write-info">
          <div class="info-img">
            <img :src="value.pic" alt />
          </div>
          <div class="info-title">
            <div class="info-title-inner">
              <p>{{value.title}}</p>
            </div>
          </div>
          <div class="info-date">
            <div class="info-title-inner">
              <p>{{value.date}}</p>
            </div>
          </div>
          <div class="info-status">
            <div class="info-title-inner">
              <p>{{value.status}}</p>
            </div>
          </div>
          <div class="info-button">
            <el-button type="primary" @click="dialogFormVisible = true" plain>{{value.button}}</el-button>
            <el-dialog title="评价" :visible.sync="dialogFormVisible" class="dialog" center :lockScroll="false">
              <span class="demonstration">商品评分</span>
              <el-rate v-model="value2" :colors="colors"></el-rate>
              <el-form :model="form">
                <el-form-item label="心得" :label-width="formLabelWidth">
                  <el-input type="textarea" :rows="5" placeholder="请输入内容" v-model="textarea"></el-input>
                </el-form-item>
              </el-form>
              <el-upload
                action="https://jsonplaceholder.typicode.com/posts/"
                list-type="picture-card"
                :on-preview="handlePictureCardPreview"
                :on-remove="handleRemove"
              >
                <i class="el-icon-plus"></i>
              </el-upload>
              <el-dialog :visible.sync="dialogVisible" :lockScroll="false">
                <img width="100%" :src="dialogImageUrl" alt />
              </el-dialog>
              <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="dialogFormVisible = false">确 定</el-button>
              </div>
            </el-dialog>
          </div>
        </div>
      </div>
      <el-pagination :page-size="20" :pager-count="11" layout="prev, pager, next" :total="1000"></el-pagination>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: [
        {
          pic: require("../../../../../assets/img/list-item.png"),
          title:
            "小米9 SE 小米9 SE 小米9 SE 小米9 SE 小米9 SE 小米9 SE 小米9 SE 小米9 SE 小米9 SE 小米9 SE 小米9 SE 小米9 SE",
          status: "待评价",
          date: "",
          button: "发表评价"
        },
        {
          pic: require("../../../../../assets/img/list-item.png"),
          title:
            "小米9 SE 小米9 SE 小米9 SE 小米9 SE 小米9 SE 小米9 SE 小米9 SE 小米9 SE 小米9 SE 小米9 SE 小米9 SE 小米9 SE",
          status: "已评价",
          date: "2020-04-02",
          button: "查看评价"
        },
        {
          pic: require("../../../../../assets/img/list-item.png"),
          title:
            "小米9 SE 小米9 SE 小米9 SE 小米9 SE 小米9 SE 小米9 SE 小米9 SE 小米9 SE 小米9 SE 小米9 SE 小米9 SE 小米9 SE",
          status: "被评价",
          date: "2020-04-02",
          button: "查看评价"
        }
      ],
      dialogFormVisible: false,
      form: {
        name: "",
        region: "",
        date1: "",
        date2: "",
        delivery: false,
        type: [],
        resource: "",
        desc: ""
      },
      dialogImageUrl: "",
      dialogVisible: false
    };
  }
};
</script>

<style scoped>
/* 写评价列表 */
.assss-write {
  min-height: 157px;
  /* background-color: blue; */
}
/* 无评价 */
.assess-write-none {
  padding-top: 135px;
  font-size: 14px;
  line-height: 22px;
  text-align: center;
}

.assess-write-item {
  box-sizing: border-box;
  padding: 40px 0;
  border-top: 1px solid #ddd;
}
.assess-write-item:first-child {
  border-top: 0;
}
.assess-write-info {
  overflow: hidden;
}
.assess-write-info .info-img {
  float: left;
  width: 114px;
  height: 114px;
}
.assess-write-info .info-img img {
  width: 100%;
}
.assess-write-info .info-title {
  float: left;
  width: 335px;
  height: 114px;
  margin-left: 26px;
  font-size: 14px;
  line-height: 22px;
  /* background-color: firebrick; */
}
.assess-write-info .info-title-inner {
  display: table-cell;
  vertical-align: middle;
  width: 435px;
  height: 114px;
}
.assess-write-info .info-title-inner p {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  overflow: hidden;
}

.assess-write-info .info-date {
  float: left;
  width: 200px;
  height: 114px;
  margin-left: 26px;
  font-size: 14px;
  line-height: 22px;
  /* background-color: gold; */
}

.assess-write-info .info-status {
  float: left;
  width: 200px;
  height: 114px;
  margin-left: 26px;
  font-size: 14px;
  line-height: 22px;
  /* background-color: fuchsia; */
}

.assess-write-info .info-button {
  float: right;
  margin-top: 40px;
  margin-right: 17px;
  /* background-color: forestgreen; */
}
.el-button--primary.is-plain:hover {
  background-color: #29a3d6;
}

/* 评价标题 */
.dialog {
  text-align: left;
}

/* 上传 */
.el-upload {
  width: 100px;
  height: 100px;
  line-height: 98px;
}
</style>